<template>
  <!-- 组件的树形结构 -->
  <el-tree
    :data="data"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span v-if="param && param.btns">
        <el-button
          v-for="btn in param.btns"
          :key="btn.btnName"
          type="text"
          size="mini"
          @click="() => btn.click(data)">
          {{btn.btnName}}
        </el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
  export default {
    props: {
      //接收外界传递过来的参数，参数类型是一个Object对象
      param: {
        type: Object
      }
    },
    data(){
      return {
        //树状结构显示的数据
        data: []
      }
    },
    methods: {
      //查询课程分类的树状结构
      queryCourseTypeTree(){
        this.$.ajax({
          url: "/course/type/treeList",
          success: (data) => {
            this.data = data;
          }
        });
      }
    },
    mounted(){
      //页面加载时触发
      this.queryCourseTypeTree();
    }
  }
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
